<template>
  <view
    class="mask"
    @touchmove.stop.prevent
    @click.stop="$emit('down', true)"
    :style="[{ display: switchIn == true ? 'none' : 'block' }]"
  >
    <view
      class="really-in"
      @click.stop
      :style="[{ bottom: keyborHeight + 'px' }]"
    >
      <input
        :placeholder="single == '' ? '说点什么?' : single"
        :show-confirm-bar="false"
        @input="sendData($event)"
        cursor-spacing="300"
        confirm-type="发送"
        @focus="focusHeight"
        :adjust-position="false"
        :focus="focus"
        @blur="blurIn"
        :value="value"
      />
      <text @click="send">发送</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    switchIn: {
      type: Boolean,
      default: true,
    },
    single: {
      type: String,
      default: () => "",
    },
    value: {
      type: String,
      default: () => "",
    },
    id: {
      type: [String, Number],
    },
  },
  data() {
    return {
      textValue: "",
      focus: true,
      keyborHeight: "",
    };
  },
  watch: {
    switchIn: {
      handler(newvalue) {
        console.log("foucs", newvalue);
        this.$nextTick(() => {
          setTimeout(() => {
            newvalue == false ? (this.focus = true) : (this.focus = false);
          }, 70);
        });
        if (newvalue == false) {
          this.textValue = "";
        }
        this.keyborHeight = 0;
      },
      immediate: true,
    },
  },
  // beforeDestroy() {
  //   this.focus = false
  // },
  methods: {
    blurIn() {
      this.keyborHeight = 0;
    },
    send() {
      this.$emit("submite", true);
    },
    //图片上传
    openUploadimg() {
      uni.chooseImage({
        count: 1,
        sizeType: "compressed",
        success: (file) => {
          console.log(file);
        },
      });
      //   uni.uploadFile({
      //     url: "",
      //   });
    },
    sendData(e) {
      this.$emit("input", e.target.value);
    },
    focusHeight(e) {
      this.keyborHeight = e.detail.height;
    },
  },
};
</script>

<style scoped lang="scss">
.mask {
  position: fixed;
  width: 750rpx;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  left: 0;
  top: 0;
  z-index: 999;
}
.really-in {
  width: 750rpx;
  overflow: hidden;
  min-height: 130rpx;
  display: flex;
  padding-left: 36rpx;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999999999;
  background-color: #ffffff;
  text {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(117, 117, 117, 1);
    cursor: pointer;
    padding: 0 47rpx;
    line-height: 65rpx;
  }

  > input {
    width: 570rpx;
    line-height: 65rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(151, 151, 151, 1);
    background: rgba(243, 243, 243, 1);
    border-radius: 33rpx;
    min-height: 65rpx;
    padding-left: 41rpx;
  }
}
.textPla {
  line-height: 65rpx;
}
</style>
